<template>
    <div class="start">
        <h2 v-creendirect="'green'">父组件</h2>
        <button @click="addB">add-b</button>
        <button @click="">add-b</button>

        <button @click="refschange">refschange</button>
        <h4>自己的车 ------{{ che }}</h4>
        <h4>子传过来的值 ------{{ ziData }}</h4>
        <h4>子传过来的玩具 ------{{ suntoy }}</h4>
        <h4>input:------------{{ inputData }}</h4>
        <h4>input1:------------{{ input1Data }}</h4>
        <h4>input2:------------{{ input2Data }}</h4>
        <br>
        <div style="display: flex;">
            <child a="1" :b="b" :fun="getZi" @sendToy="getchildtoy" v-model="inputData" ref="refSun"
                :parentData="data" />
            <child2 v-model:code="input1Data" v-model:age="input2Data" :aa="aa" :bb="bb" :cc="cc" :dd="dd"
                ref="refSun2" />
        </div>
    </div>
</template>

<script lang='ts' setup>
import { provide, reactive, ref } from 'vue'
import child from "./child.vue"
import child2 from "./child2.vue"
let b = ref(2)
let ziData = ref(0)

let suntoy = ref("")
let inputData = ref('')
let input1Data = ref('')

let input2Data = ref('')
let aa = ref(111)
let bb = ref(222)
let cc = ref(333)
let dd = ref(444)
let refSun = ref()
let refSun2 = ref()
let che = ref("宝马")

const data = reactive<number[]>([886]);
setInterval(() => {
    data.push(1)
}, 1000);

function addB() {
    b.value += 1
}
const getZi = (value: any) => {
    ziData.value = value
}
const getchildtoy = (value: any) => {
    suntoy.value = value
}
const refschange = () => {
    console.log(2);
    refSun.value.toy += "****"
}
const chefn = (value: any) => {
    che.value += value
}
provide("che", che)
provide("chefn", chefn)
defineExpose({ che })
</script>
<style scoped>
.start {

    top: -200px;
    height: 500px;
    /* background: rgb(173, 154, 154); */
}
</style>